import React, { useState, useEffect } from 'react';
import { Button, Divider } from 'antd';
import { Flex, Toast } from 'antd-mobile';
import * as api from '@/services/GatewayNewsMgr';
import styles from './index.less';

const initialState = {
  emptyMsg: '加载中...',
  emptyTYpe: true,
  data: [],
};
const TodoListMobileApp = props => {
  const { taskId } = props.location.query; // 获取url 的taskId
  const [state, setState] = useState(initialState);

  useEffect(() => {
    setState({
      ...state,
      emptyMsg: '加载中...',
      emptyTYpe: false,
    });
    if (taskId) {
      const params = {
        instanceId: taskId,
        projectId: '',
        todoTypeCode: '',
      };
      api.getAppToDoUsingGET({ params }).then(result => {
        if (result && result.code === 1) {
          setState({
            ...state,
            emptyMsg: result.data.length <= 0 ? '暂无数据' : '',
            data: result.data,
            emptyTYpe: false,
          });
        } else {
          setState({
            ...state,
            emptyMsg: result.message,
            emptyTYpe: false,
          });
        }
      });
    } else {
      setState({
        ...state,
        emptyMsg: '加载失败',
      });
    }
  }, [taskId]);
  useEffect(() => {
    if (state.emptyMsg !== '') {
      Toast.loading(state.emptyMsg, 2, () => {});
    }
  }, [state.emptyMsg]);
  const judgeToDoType = type => {
    let str = '';
    if (Number(type) === 0) str = '待处理';
    if (Number(type) === 1) str = '已处理';
    if (Number(type) === 2) str = '已删除';
    return str;
  };
  // 处理待办
  const handlerToDoInfo = () => {
    Toast.loading('处理中', 1, () => {
      console.log('Load complete !!!');
    });
    if (taskId) {
      const params = {
        instanceId: taskId,
        operatorType: '4',
        projectId: '',
        todoTypeCode: '',
      };
      console.log('###params===', params);
      api.cleanAppToDoUsingGET({ params }).then(result => {
        if (result && result.code === 1) {
          Toast.success('处理成功', 1, () => {
            window.location.reload();
          });
        }
      });
    } else {
      Toast.offline('没有待办实例ID !!!', 1);
    }
  };
  return (
    <div className={styles['xh-todo-list-app']}>
      {!state.emptyTYpe && state.data.length > 0 ? (
        <>
          <div className="xh-todo-list-text">
            <span className="xh-todo-list-font1">待办内容</span>
            <div className="xh-todo-list-text-content xh-todo-list-font3">
              {state.data[0].content}
            </div>
          </div>
          <Divider />
          <Flex className="xh-todo-list-type" justify="between">
            <span className="xh-todo-list-font1">状态</span>
            <span className="xh-todo-list-font2">{judgeToDoType(state.data[0].todoStatus)}</span>
          </Flex>
          <Flex className="xh-todo-list-type" justify="between">
            <span className="xh-todo-list-font1">创建时间</span>
            <span className="xh-todo-list-font2">{state.data[0].updateTime}</span>
          </Flex>
          {Number(state.data[0].todoStatus) === 0 ? (
            <Flex className="xh-todo-list-footer" direction="column" justify="center">
              <Button type="primary" onClick={handlerToDoInfo}>
                知道了
              </Button>
            </Flex>
          ) : null}
        </>
      ) : null}
    </div>
  );
};

export default TodoListMobileApp;
